import { history, useModel } from "umi";
import dayjs from "dayjs";
import { Space, Table, Popconfirm, message, Tooltip, Divider } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconRefresh, IconUserAdd, IconEyeOpened } from "@douyinfe/semi-icons";

import useHelperStaff from "../helper/useHelperStaff";

import useAllStaffs from "../hooks/staff/useAllStaffs";
import useSyncInfoFromMember from "../hooks/staff/useSyncInfoFromMember";
import useCreateSystemUser from "../hooks/staff/useCreateSystemUser";
import useStaffResignated from "../hooks/staff/useStaffResignated";

// 全部员工
const AllStaffPage = () => {
    const { windowInnerHeight } = useModel("global");
    const { loading, staffs, loadAllStaffs } = useAllStaffs({});
    const { openAddStaffModal, openCreateStaffModal, openEditStaffModal, openEditSystemStaffModal, openChangeMemberOfStaffModal, openBindingMemberOfStaffModal } = useHelperStaff();
    const { syncStaffInfoFromMember } = useSyncInfoFromMember();
    const { createSystemUser } = useCreateSystemUser();
    const { loading: resignatedLoading, updateStaffResignated } = useStaffResignated();

    const gotoPage = (record) => {
        switch (record.osType) {
            case "正式":
                history.replace({ pathname: "/regular/information?osUuid=" + record.osUuid }, { osUuid: record.osUuid });
                break;

            default:
                break;
        }
    };

    const renderIdno = (_, r, i) =>
        _ ? (
            <Tooltip title={_}>
                <IconEyeOpened />
            </Tooltip>
        ) : (
            "-"
        );

    const renderPhone = (_, r, i) =>
        _ ? (
            <Tooltip title={_}>
                <IconEyeOpened />
            </Tooltip>
        ) : (
            "-"
        );

    const renderBirthday = (_, r, i) => (
        <Tooltip title={_ ? formatTime(_, "YYYY年MM月DD日") : ""}>
            <IconEyeOpened />
        </Tooltip>
    );

    const renderSystemUser = (_, r, i) =>
        _ ? (
            <Space>
                <div>是</div>
                <div>
                    (<a onClick={() => openChangeMemberOfStaffModal({ staff: r, reloadData: loadAllStaffs })}>变更</a> |{" "}
                    {r.osFrom === "来自成员" && (
                        <a
                            onClick={() =>
                                syncStaffInfoFromMember(r, (res) => {
                                    if (res) {
                                        message.success("成功同步成员信息");
                                        loadAllStaffs();
                                    }
                                })
                            }
                        >
                            同步
                        </a>
                    )}
                    )
                </div>
            </Space>
        ) : (
            <Space>
                <div>否</div>
                <div>
                    (<a onClick={() => openBindingMemberOfStaffModal({ staff: r, reloadData: loadAllStaffs })}>绑定</a> |{" "}
                    <a
                        onClick={() =>
                            createSystemUser(r, (res) => {
                                if (res) {
                                    message.success("成功创建系统用户信息");
                                    loadAllStaffs();
                                }
                            })
                        }
                    >
                        创建
                    </a>
                    )
                </div>
            </Space>
        );

    const renderOperate = (_, r, i) => (
        <Space split={<Divider type="vertical" />} size={0}>
            <a onClick={() => gotoPage(r)}>详情</a>

            <a
                onClick={() =>
                    r.osFrom === "手工录入" ? openEditStaffModal({ staff: r, reloadData: loadAllStaffs }) : openEditSystemStaffModal({ staff: r, reloadData: loadAllStaffs })
                }
            >
                编辑
            </a>

            <Popconfirm
                title="确认要把该员工改成离职状态吗？"
                okButtonProps={{ loading: resignatedLoading }}
                onConfirm={() =>
                    updateStaffResignated(r, (res) => {
                        if (res) {
                            message.success("成功更改员工状态为离职");
                            loadAllStaffs();
                        }
                    })
                }
            >
                <a>离职</a>
            </Popconfirm>
        </Space>
    );

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 48;

    return (
        <SemiCard
            title={<span style={{ lineHeight: "32px", fontSize: 15 }}>员工列表</span>}
            headerStyle={{ padding: "7px 12px" }}
            shadows="always"
            bordered={false}
            bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
            style={{ margin: 10 }}
            headerExtraContent={
                <ButtonGroup>
                    <Button icon={<IconUserAdd />} title="从成员中添加" onClick={() => openAddStaffModal({ reloadData: loadAllStaffs, staffs })}>
                        从成员中添加
                    </Button>
                    <Button icon={<IconPlusCircle />} title="手工添加员工" onClick={() => openCreateStaffModal({ reloadData: loadAllStaffs })}>
                        手工添加员工
                    </Button>
                    <Button icon={<IconRefresh />} onClick={loadAllStaffs}>
                        刷新
                    </Button>
                </ButtonGroup>
            }
        >
            <Table loading={loading} bordered dataSource={staffs} rowKey={"osUuid"} pagination={false} scroll={{ y: cardBodyHeight - 56 }}>
                <Table.Column title="序号" width={70} align="center" render={(_, r, i) => i + 1} />
                <Table.Column title="姓名" dataIndex={"osName"} />
                <Table.Column title="职位" dataIndex={"position"} render={(_, r, i) => _?.opName || "-"} />
                <Table.Column title="直属上级" dataIndex={"deInfo"} width={120} align="left" render={(_, r, i) => _?.osName || "-"} />
                <Table.Column title="性别" dataIndex={"osRoge"} width={80} align="center" />
                <Table.Column title="年龄" dataIndex={"osBirt"} width={80} align="center" render={(_, r, i) => (_ ? getAge(_) : "-")} />
                <Table.Column title="民族" dataIndex={"osNati"} width={80} align="center" />
                <Table.Column title="身份证号" dataIndex={"osIdnu"} width={100} align="center" render={renderIdno} />
                <Table.Column title="手机号" dataIndex={"osPhon"} width={80} align="center" render={renderPhone} />
                <Table.Column title="生日" dataIndex={"osBirt"} width={80} align="center" render={renderBirthday} />
                <Table.Column title="属相" dataIndex={"osBirt"} width={70} align="center" render={(_, r, i) => (_ ? getShuxiang(_) : "-")} />
                <Table.Column title="星座" dataIndex={"osBirt"} width={80} align="center" render={(_, r, i) => (_ ? getXingZuo(_) : "-")} />
                <Table.Column title="类型" dataIndex={"osType"} width={80} align="center" />
                <Table.Column title="来源" dataIndex={"osFrom"} width={100} align="center" />
                <Table.Column title="系统用户" dataIndex={"omUuid"} width={140} align="left" render={renderSystemUser} />
                <Table.Column title="操作" width={160} align="center" render={renderOperate} />
            </Table>
        </SemiCard>
    );
};

const getAge = (date) => {
    let nowDate = dayjs();
    let birthday = dayjs(date);
    let age = dayjs.duration(nowDate.diff(birthday)).years();
    return age;
};

const getShuxiang = (date) => {
    let newDate = formatTime(date, "YYYY-MM-DD");
    const [year, month, day] = newDate.split("-");
    const { shengxiao } = helper.calculater(year, month, day);
    return shengxiao;
};

const getXingZuo = (date) => {
    let newDate = formatTime(date, "YYYY-MM-DD");
    const [year, month, day] = newDate.split("-");
    const { xingzuo } = helper.calculater(year, month, day);
    return xingzuo;
};

export default AllStaffPage;
